<template>
    <div class="movie-box">
        <!-- MovieNav -->
        <movie-nav></movie-nav>
        <!-- hot -->
        <router-view :state="state" :state-type="stateType"></router-view>
    </div>
</template>

<script>
import MovieNav from 'Pages/movie/Nav'
export default {
    data() {
        return {
            state: this.$route.path,
            stateType: 'movieList'
        }
    },
    watch: {
        '$route.path'() {
            this.state = this.$route.path
            this.stateType = this.$route.path === '/movie/n-hot' ? 'movieList' : 'coming'
        }
    },
    components: {
        MovieNav
    },
    created () {
      if ( this.$route.path === '/movie/n-hot' ){
        this.stateType = 'movieList'
      }else{
        this.stateType = 'coming'
      }
    }
}
</script>

<style lang="stylus" scoped>
    .movie-box
        flex 1
        font-size 0.15rem
        display flex
        flex-direction column
</style>
